<template>
  <div>
    <h4>欢迎光临_vue开发的收银系统_水果店</h4>
    <h4>苹果10￥/斤,折扣《8折》</h4>
    <h4>请输入你要购买的斤数<input type="text" v-model="price" /></h4>
    <button @click="fn">结账买单~</button>
    <h5>
      总账单:总价<input type="text" v-model="zj" />￥元 折后价:<input
        type="text"
        v-model="zh"
      />￥元 省了:<input type="text" v-model="jy" />￥元
    </h5>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: "0",
      zj: "",
      jy: "",
      zh: "",
    };
  },
  methods: {
    fn() {
      this.zj = 10 * this.price;
      this.zh = 10 * this.price * 0.8;
      this.jy = this.zj - this.zh;
    },
  },
};
</script>

<style>
h5 input {
  height: 10px;
  width: 30px;
}
</style>